import {Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';

import {DataTableDirective} from 'angular-datatables';
import {Subject} from 'rxjs/Subject';
import {ResourceService} from '../../service/resource.service';

declare var $: any;
@Component({
  selector: 'app-resource',
  templateUrl: './resource.component.html',
  styleUrls: ['./resource.component.scss']
})
export class ResourceComponent implements OnInit, AfterViewInit {
  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: any = [];
  dtTrigger: Subject<any> = new Subject();
  constructor(private resourceService: ResourceService) { }

  ngOnInit() {
    this.dtOptions = {
      dom: 'rt<"row" <"col-xs-6" l> <"col-xs-6" p>>',
      serverSide: true,
      // data: this.dataList,
      autoWidth: true,
      pageLength: 10,
      rowId: 'id',
      order: [[ 1, 'desc' ]],
      columns: [{
        title: '<label class="checkbox c-checkbox" ><input type="checkbox"><span class="fa fa-check"></span></label>',
        data: 'id',
        orderable: false,
        searchable: false,
        render: (data, type) => '<label class="checkbox c-checkbox"><input type="checkbox"><span class="fa fa-check"></span></label>'
      }, {
        title: '资源编码',
        data: 'resourceCode'
      }, {
        title: '资源名称',
        data: 'resourceName'
      }, {
        title: '资源路径',
        data: 'resourcePath'
      }, {
        title: '资源类型',
        data: 'resourceType'
      }, {
        title: '资源图标',
        data: 'resourceIcon'
      }, {
        title: '创建人',
        data: 'createBy'
      }, {
        title: '创建时间',
        data: 'createTime'
      }, {
        title: '修改人',
        data: 'updateBy'
      }, {
        title: '修改时间',
        data: 'updateTime'
      }, {
        title: '操作',
        orderable: false,
        align: 'center',
        searchable: false,
        className: 'active-column',
        data: 'active',
        render: (data, type, row, meta) => {
          console.log(data, type, row, meta);
          return 'xx';
        }
      }],
     ajax: (data, callback) => this.getPageData(data, callback),
      select: true
    };
  }

  getPageData(data, callback) {
    this.resourceService.page(data).subscribe(rj => callback(rj.data));
  }

  ngAfterViewInit(): void {
    const srlf = this;
    this.dtTrigger.next();

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.on('select', (e, s, json) => {
        const  rows = dtInstance.row({ selected: true });
        // srlf.seelctedRow = rows.data();
        console.log('selected', rows.data());
      }).on('deselect', (e, s, json) => {
        const  rows = dtInstance.row({ draw: 'row' });
        // srlf.seelctedRow = {};
        console.log('deselect', rows.data());
      });
    });
  }

  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });
  }

  search(): void {
    this.rerender();
  }

  add (event): void {
    //this.openModal('新增');
  }
  edit(event): void {
    //this.openModal('修改');
  }
}
